<template>
<div class="container">
    <div class="login-box">
       <div class="login-box-left">

       </div>
       <div class="login-box-right">
            <h1 class="login-box-right-title">Login</h1>
            <el-form :model="loginform" :rules="rules" ref="loginformRef">
                <el-form-item prop="username" class="login-box-right-form-item">
                    <el-input  v-model="loginform.username" placeholder="请输入用户名" :prefix-icon="User" clearable />
                </el-form-item>
                <el-form-item prop="password" class="login-box-right-form-item">
                    <el-input v-model="loginform.password" placeholder="请输入密码" :prefix-icon="Lock" clearable  show-password />
                </el-form-item>
                <el-button type="primary" size="large" class="login-box-right-form-button" @click="login" :loading="loading">登录</el-button>
            </el-form>
       </div>
    </div>
</div>
</template>
<script setup lang="ts">
import {  reactive, ref } from 'vue';
import { User, Lock } from '@element-plus/icons-vue';
import { useUserStore } from '@/store/modules/user';
import router from '@/route';
import { ElNotification } from 'element-plus';
import { getTime } from '@/utils/gettime';
const userStore = useUserStore();
let loginform=reactive({
    username:'',
    password:''
})
const validateUsername = (_rule:any,value:any,callback:any) => {
    if(value === ''){
        callback(new Error('请输入用户名'));
    }else{
        callback();
    }
}
const validatePassword = (_rule:any,value:any,callback:any) => {
    if(value === ''){
        callback(new Error('请输入密码'));
    }else{
        callback();
    }
}
const rules = reactive({
    username:[{validator:validateUsername,trigger:'blur'}],
    password:[{validator:validatePassword,trigger:'blur'}]
})
let loginformRef = ref();
let loading = ref(false);
const login = async() => {
    loading.value = true;
    try{
        await userStore.userlogin(loginform);
        ElNotification({
            title:'登录成功',
            message:`欢迎回来 ${getTime()}好`,
            type:'success'
        })
        router.push('/home');
        loading.value = false;
    }catch(error){
        loading.value = false;
        ElNotification({
            message:(error as Error).message,
            type:'error'
        })
    }
}
</script>
<style scoped lang="less">
@import '../../styles/login/logincss.less';
</style>

